<template>
  <div class="version-list pd-20">
    <el-button type="primary"
               @click="editBtn(null, 'add')">新 增</el-button>
    <el-table border
              :data="tableData"
              class="mt-20">
      <el-table-column label="当前版本号"
                       prop="softwareVersion"
                       width="200"></el-table-column>
      <el-table-column label="软件包地址"
                       prop="softwareUrl">
      </el-table-column>
      <el-table-column label="软件包下载"
                       width="150"
                       align="center">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="primary"
                     plain
                     icon="el-icon-download"
                     @click="download(scope.row)">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       width="100">
        <template slot-scope="scope">
          <el-button type="primary"
                     @click="editBtn(scope.row, 'edit')">编 辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title"
               :visible.sync="dialogVisible"
               width="30%"
               @close="dialogVisible = false">
      <el-form :model="ruleForm"
               :rules="rules"
               ref="ruleFormRef"
               label-width="100px">
        <el-form-item label="版本号"
                      prop="softwareVersion"
                      placeholder="请输入版本号">
          <el-input v-model="ruleForm.softwareVersion"
                    class="w-200"></el-input>
        </el-form-item>

        <el-form-item label="软件包">
          <el-upload :action="fileUploadAction"
                     :on-success="uploadSuccess"
                     :limit="1">
            <el-button size="small"
                       type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'versionList',
    data () {
      return {
        tableData: [],
        title: '',
        dialogVisible: false,
        ruleForm: {
          id: null,
          softwareVersion: '',
          softwareUrl: ''
        },
        rules: {
          softwareVersion: [
            { required: true, message: '请输入版本号', trigger: 'blur' }
          ]
        },
        fileUploadAction: this.api.appUpgradeUpload.url,
      }
    },
    methods: {
      // 获取列表
      async getList () {
        const { data: res } = await this.post(this.api.versionInfo.getVersionList)
        if (res.code === '200') {
          this.tableData = res.object
        } else {
          this.$message.error(res.message)
        }
      },
      editBtn (row, op) {
        this.dialogVisible = true
        switch (op) {
          case 'add':
            this.title = '新增底座版本'
            break
          case 'edit':
            this.title = '编辑底座版本'
            this.ruleForm = Object.assign({}, row)
            break
        }
      },
      submitForm () {
        this.$refs['ruleFormRef'].validate(async (valid) => {
          if (valid) {
            const { data: res } = await this.post(this.api.versionInfo.getVersionUpdate, this.ruleForm)

            if (res.code === '200') {
              this.$message.success('保存成功')
              this.dialogVisible = false
              this.getList()
            } else {
              this.$message.error(res.message)
            }
          }
        });
      },
      // 上传成功
      uploadSuccess (response, file, fileList) {
        if (response.code === '200') {
          // 状态码为200时则上传成功
          this.ruleForm.softwareUrl = file.response.object[0];
          this.$message.success('上传成功');
        } else {
          // 状态码不是200时上传失败 从列表中删除
          fileList.splice(fileList.indexOf(file), 1);
          this.$message.error(response.message);
        }
      },
      // 文件下载
      download (row) {
        if (row.softwareUrl) {
          let fileUrl = row.softwareUrl
          let fileName = row.barcode;
          let fileFormat = fileUrl.split('.').includes('txt')
          if (fileFormat) {
            const xmlhttp = new XMLHttpRequest();
            xmlhttp.addEventListener("load", (response) => {
              let _a = document.createElement('a');
              _a.style.display = 'none';
              _a.download = fileName; // 文件名称
              _a.href = "data:text/plain;charset=utf-8," + encodeURIComponent(response.target.responseText);
              document.body.appendChild(_a);
              _a.click();
              document.body.removeChild(_a);
            })
            xmlhttp.open('GET', row.codeFileUrl);
            xmlhttp.send()
          } else {
            const a = document.createElement('a')
            a.setAttribute('download', fileName)
            a.setAttribute('target', '_blank')
            a.setAttribute('href', fileUrl)
            a.click()
          }
        } else {
          this.$message.error('没有文件可下载!')
        }
      },
    },
    created () {
      this.getList()
    }
  }
</script>
<style scoped>
</style>